<template>
	<!-- 定义筛选导航  套餐类型 销量  价格  -->
	<view class="Top-view">
		<view v-for="(item, index) in phytermData" :key="item._id" @click="queryCombo(index)">
			<text>{{ item.query_val }}</text>
			<image :src="index == 0 ? '/static/other/shaixuan-jiantou.png' : '/static/other/shaixuan.png'"></image>
		</view>
	</view>

	<view style="height:100rpx"></view>

	<!-- 套餐类型：点击全部的筛选 -->
	<view class="mask-view" v-if="buffer"></view>
	<view class="con-view" v-if="buffer">
		<text v-for="(item, index) in phytermData[0].filter_val" :key="index" @click="selectType(item)">{{ item }}</text>
	</view>

	<!-- 套餐列表 -->
	<view class="phy-exam-back" @click="phyDetail(item._id)" v-for="(item, index) in physgetData" :key="item._id">
		<text class="phy-exam-type">{{ item.title }}</text>
		<view class="phy-exam-flex">
			<image :src="item.image" mode="aspectFill">
			</image>
			<view>
				<text class="phy-exam-title">{{ item.be_suit }}</text>
				<text class="phy-exam-label">{{ item.describe }}</text>
			</view>
		</view>
		<view class="phy-exam-price">
			<text>已约{{ item.sales }}</text>
			<text>¥{{ item.price }}</text>
		</view>
	</view>
	<view @click="top()">
		快速置顶
	</view>
	<view style="height:300rpx"></view>
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onMounted, reactive, toRefs } from 'vue'
import { reqPhyterm, reqPhysget, reqPhyquery } from "@/serve/api"
import { phytermType, physgetType, phyqueryType } from "@/types/index"
import { onPageScroll } from "@dcloudio/uni-app";

// 2.定义页面响应式数据
let pageData = reactive({
	phytermData: [] as phytermType[],
	physgetData: <physgetType[]>[],
	buffer: false,//控制体检套餐类型下拉框显示和隐藏
	searchParams: {
		type: "",
		sales: "",
		price: "",
	} as phyqueryType//查询条件参数
})

// 3.批量创建解构响应式数据（ref）
let { phytermData, physgetData, buffer } = toRefs(pageData)


// 4.获取页面需要的体检数据（筛选和列表）
onMounted(async () => {
	let res = await Promise.all([reqPhyterm(), reqPhysget()])
	console.log('数据是：', res)
	pageData.phytermData = res[0].data
	pageData.physgetData = res[1].data

})

// 5.切换筛选导航数据
function queryCombo(index: number) {

	console.log('触发了')
	if (index == 0) {
		pageData.buffer = !pageData.buffer
	}
}

// 6.切换套餐类型
function selectType(value: string) {
	pageData.phytermData[0].query_val = value
	pageData.buffer = false
	pageData.searchParams.type = value
	getSearch()
}

// 7.搜索套餐方法(可以根据套餐类型  销量 价格)
async function getSearch() {
	let res = await reqPhyquery(pageData.searchParams)
	pageData.physgetData = res.data
}

// 8.监听页面滚动
onPageScroll((info) => {
	console.log(info.scrollTop)//根据此值控制置顶悬浮球的显示和隐藏
})

//9.实现快速置顶
function top() {
	console.log('触发了')
	uni.pageScrollTo({
		duration: 0,//滚动动画的时长
		scrollTop: 0//滚动到顶部的位置
	})
}

// 10.到体检详情页
function phyDetail(id: string) {
	uni.navigateTo({
		url: "/pages/healthy/desc?id=" + id
	})
}



</script>
  
  
<style>
page {
	background-color: #fafafa;
}

.Top-view {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 50rpx;
	height: 100rpx;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
}

.Top-view view {
	display: flex;
	align-items: center;
}

.Top-view image {
	width: 20rpx;
	height: 20rpx;
	display: block;
	padding-left: 10rpx;
}

/* 筛选条件 */
.mask-view {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: 100rpx;
	background-color: rgba(0, 0, 0, 0.5);
}

.con-view {
	background-color: #ffffff;
	padding: 0 50rpx;
	position: fixed;
	top: 100rpx;
	left: 0;
	right: 0;
}

.con-view text {
	display: block;
	padding: 20rpx 0;
}

.con-view text.selectActive {
	background: #DDD;
	font-weight: bold;
}

/* 体检套餐 */
.phy-exam-back {
	background-color: #ffffff;
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 10rpx;
}

.phy-exam-type {
	font-size: 35rpx;
	font-weight: bold;
}

.phy-exam-flex image {
	width: 200rpx;
	height: 200rpx;
	display: block;
}

.phy-exam-flex {
	display: flex;
	justify-content: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f6f6f6;
}

.phy-exam-flex view {
	flex: 1;
	padding-left: 20rpx;
}

.phy-exam-flex text {
	display: block;
}

.phy-exam-title {
	font-weight: bold;
	padding-bottom: 20rpx;
}

.phy-exam-label {
	color: #5555;
}

.phy-exam-price {
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
	font-weight: bold;
	color: #ff5f2c;
}
</style>
